<template>
	<view :style="[AppSkinVar]">
		<view class="header-box e-rela c-white">
			<image class="e-abso" :src="$staticPath('user/release_bg.png')"></image>
			<view class=" e-flex-xy-center e-p-t-60">
				<view class="text-center">
					<view class="">
						{{ $t('user.本月已释放额度') }}
					</view>
					<view class="money">
						{{ 0 }}
					</view>
				</view>
			</view>
			<view class=" e-flex  ">
				<view class="text-center sub-box">
					<view class="e-font-48 fw-500">
						{{ 0 }}
					</view>
					<view class="">
						{{ $t('user.累计收入额度') }}
					</view>
				</view>
				<view class="text-center sub-box">
					<view class="e-font-48 fw-500">
						{{ 0 }}
					</view>
					<view class="">
						{{ $t('user.累计释放额度') }}
					</view>

				</view>
			</view>

		</view>
		<view class="tab e-flex-xy-center  bg-white">
			<view class=" text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 0"
				:class="{ 'tab-active': tabIndex === 0 }">
				{{ $t('common.全部') }}
			</view>
			<view class=" text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 1"
				:class="{ 'tab-active': tabIndex === 1 }">
				{{ $t('user.收入') }}
			</view>
			<view class=" text-center e-rela e-flex-1 fw-600" @tap="tabIndex = 2"
				:class="{ 'tab-active': tabIndex === 2 }">
				{{ $t('user.支出') }}
			</view>
		</view>
		<swiper class="swiper" :current="tabIndex" @change="e => (tabIndex = e.detail.current)">
			<swiper-item>
				<scroll-view scroll-y @scrolltolower="getAllList" lower-threshold="60">
					<recordCard v-for="item in allList" :infoSymbol="item.isout == 1" :status="item.isout == 0"
						:key="item.id" :info="item"></recordCard>
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="allEmptyShow"></empty>
					<load-more v-else :showLoad="allShowLoad"></load-more>

				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y @scrolltolower="getIncomeList" lower-threshold="60">
					<recordCard v-for="item in incomeList" :key="item.id" :info="item" :infoSymbol="true"
						:status="false"></recordCard>
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="incomeEmptyShow">
					</empty>
					<load-more v-else :showLoad="incomeShowLoad"></load-more>

				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y @scrolltolower="getExpendList" lower-threshold="60">
					<recordCard v-for="item in expendList" :infoSymbol="false" :status="true" :key="item.id"
						:info="item"></recordCard>
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="expendEmptyShow">
					</empty>
					<load-more v-else :showLoad="expendShowLoad"></load-more>

				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { getFundDetailsList } from '@/common/request/api'
	import recordCard from './child/record-card.vue'

	import {
		useCurrentInstance,
		useQueryPage
	} from '@/common/hooks'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const props = defineProps({
		id: String,
		title: String,
	})

	const ctx = useCurrentInstance()

	const tabIndex = ref(0)

	const {
		showLoad: allShowLoad,
		isEmpty: allEmptyShow,
		list: allList,
		handleQueryPage: getAllList,
		handleRefresh: refreshAllList
	} = useQueryPage({
		api: getFundDetailsList,
		option: {
			params: {
				strategy: props.id
			}
		}
	})


	const {
		showLoad: incomeShowLoad,
		isEmpty: incomeEmptyShow,
		list: incomeList,
		handleQueryPage: getIncomeList,
		handleRefresh: refreshIncomeList
	} = useQueryPage({
		api: getFundDetailsList,
		option: {
			params: {
				strategy: props.id
			}
		}
	})

	const {
		showLoad: expendShowLoad,
		isEmpty: expendEmptyShow,
		list: expendList,
		handleQueryPage: getExpendList,
		handleRefresh: refreshExpendList
	} = useQueryPage({
		api: getFundDetailsList,
		option: {
			params: {
				strategy: props.id
			}
		}
	})

	onLoad(() => {
		uni.setNavigationBarTitle({
			title: props.title
		})
		refreshAllList()
		refreshIncomeList()
		refreshExpendList()
	})
</script>
<style>
	page {
		padding: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.header-box {
		height: 370rpx;
		background: var(--gradient-primary);
		border-radius: 10rpx;

		>image {
			width: 100%;
			height: 100%;
			right: 0;
			top: 0;
			z-index: 1;
		}

		.money {
			font-size: 72rpx;
			font-family: DIN-Medium, DIN;
			font-weight: 500;
			line-height: 88rpx;
		}

		.sub-box {
			flex: 0 0 50%;
			width: 50%;
			padding: 20rpx 0;
		}
	}

	.tab {
		>view {
			flex: 0 0 33.33%;
			height: 100rpx;
			line-height: 100rpx;
		}

		.tab-active {
			&::before {
				content: '';
				position: absolute;
				width: 60rpx;
				height: 6rpx;
				background: var(--color-primary);
				border-radius: 3rpx;
				bottom: 0;
				left: calc(50% - 23rpx);
			}
		}
	}

	.swiper {
		height: calc(100vh - 510rpx);

		scroll-view {
			height: 100%;
		}
	}
</style>